Web 应用开发教程

1. ASP.NET Core 简介

1.1 什么是 ASP.NET Core？

ASP.NET Core 是一个跨平台的开源框架，用于构建现代的、基于云的、Internet 连接的应用程序。它结合了 ASP.NET 的强大功能和 .NET Core 的灵活性，使开发者能够创建高性能的 Web 应用程序。

1.2 为什么选择 ASP.NET Core？

• 跨平台支持：可以在 Windows、Linux 和 macOS 上运行。
• 高性能：基于 .NET Core 的高效运行时。
• 模块化设计：允许开发者根据需要添加功能。
• 现代开发工具：支持最新的开发工具和技术。

2. 环境搭建

2.1 安装 .NET SDK

首先，你需要安装 .NET SDK。你可以从 .NET 官方网站 下载并安装适合你操作系统的版本。

2.2 安装 Visual Studio 或 Visual Studio Code

• Visual Studio：如果你使用 Windows，推荐安装 Visual Studio，它提供了强大的集成开发环境（IDE）。
• Visual Studio Code：如果你更喜欢轻量级的编辑器，可以选择 Visual Studio Code，并安装 C# 扩展。

2.3 创建第一个 ASP.NET Core 项目

打开命令行工具，输入以下命令来创建一个新的 ASP.NET Core 项目：

dotnet new webapp -o MyFirstWebApp
cd MyFirstWebApp
dotnet run

这将创建一个名为 MyFirstWebApp 的 Web 应用程序，并在本地运行它。你可以在浏览器中访问 http://localhost:5000 来查看你的第一个 Web 应用。

3. MVC 架构

3.1 MVC 模式简介

MVC（Model-View-Controller）是一种设计模式，用于将应用程序的逻辑分离为三个独立的组件：

• Model：表示应用程序的数据和业务逻辑。
• View：负责显示数据（通常是用户界面）。
• Controller：处理用户输入，与 Model 交互，并决定如何更新 View。

3.2 创建一个简单的 MVC 应用

3.2.1 创建 Model

在 Models 文件夹中创建一个新的类 Product.cs：

namespace MyFirstWebApp.Models
{
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public decimal Price { get; set; }
    }
}

3.2.2 创建 Controller

在 Controllers 文件夹中创建一个新的控制器 ProductsController.cs：

using Microsoft.AspNetCore.Mvc;
using MyFirstWebApp.Models;

namespace MyFirstWebApp.Controllers
{
    public class ProductsController : Controller
    {
        public IActionResult Index()
        {
            var products = new List<Product>
            {
                new Product { Id = 1, Name = "Laptop", Price = 999.99m },
                new Product { Id = 2, Name = "Smartphone", Price = 499.99m }
            };
            return View(products);
        }
    }
}

3.2.3 创建 View

在 Views/Products 文件夹中创建一个新的视图 Index.cshtml：

@model List<MyFirstWebApp.Models.Product>

<h2>Products</h2>
<ul>
    @foreach (var product in Model)
    {
        <li>@product.Name - [email protected]</li>
    }
</ul>

3.3 运行应用

在命令行中运行 dotnet run，然后在浏览器中访问 http://localhost:5000/Products，你将看到产品列表。

4. Razor Pages

4.1 什么是 Razor Pages？

Razor Pages 是 ASP.NET Core 中的一种简化 Web 开发的方式，特别适合页面驱动的应用程序。每个页面通常包含一个 .cshtml 文件和一个对应的 .cshtml.cs 文件。

4.2 创建一个 Razor Page

4.2.1 创建 PageModel

在 Pages 文件夹中创建一个新的 Razor Page Index.cshtml.cs：

using Microsoft.AspNetCore.Mvc.RazorPages;

namespace MyFirstWebApp.Pages
{
    public class IndexModel : PageModel
    {
        public string Message { get; set; }

        public void OnGet()
        {
            Message = "Hello, Razor Pages!";
        }
    }
}

4.2.2 创建 Razor Page

在 Pages 文件夹中创建一个新的 Razor Page Index.cshtml：

@page
@model MyFirstWebApp.Pages.IndexModel

<h2>@Model.Message</h2>

4.3 运行应用

在命令行中运行 dotnet run，然后在浏览器中访问 http://localhost:5000/，你将看到 "Hello, Razor Pages!" 的消息。

5. Web API 开发

5.1 什么是 Web API？

Web API 是一种用于构建 HTTP 服务的框架，通常用于创建 RESTful 服务。ASP.NET Core 提供了强大的工具来创建和测试 Web API。

5.2 创建一个简单的 Web API

5.2.1 创建 Controller

在 Controllers 文件夹中创建一个新的控制器 WeatherForecastController.cs：

using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;

namespace MyFirstWebApp.Controllers
{
    [ApiController]
    [Route("[controller]")]
    public class WeatherForecastController : ControllerBase
    {
        private static readonly string[] Summaries = new[]
        {
            "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
        };

        [HttpGet]
        public IEnumerable<WeatherForecast> Get()
        {
            var rng = new Random();
            return Enumerable.Range(1, 5).Select(index => new WeatherForecast
            {
                Date = DateTime.Now.AddDays(index),
                TemperatureC = rng.Next(-20, 55),
                Summary = Summaries[rng.Next(Summaries.Length)]
            })
            .ToArray();
        }
    }

    public class WeatherForecast
    {
        public DateTime Date { get; set; }
        public int TemperatureC { get; set; }
        public string Summary { get; set; }
    }
}

5.3 运行应用

在命令行中运行 dotnet run，然后在浏览器中访问 http://localhost:5000/WeatherForecast，你将看到返回的天气预报数据。

6. Blazor 框架入门

6.1 什么是 Blazor？

Blazor 是一个用于构建交互式 Web UI 的框架，允许你使用 C# 而不是 JavaScript 来创建单页应用程序（SPA）。

6.2 创建一个 Blazor 应用

6.2.1 创建 Blazor 项目

在命令行中输入以下命令来创建一个新的 Blazor 项目：

dotnet new blazorserver -o MyBlazorApp
cd MyBlazorApp
dotnet run

6.2.2 运行应用

在命令行中运行 dotnet run，然后在浏览器中访问 http://localhost:5000，你将看到 Blazor 的默认页面。

6.3 添加一个简单的组件

6.3.1 创建组件

在 Pages 文件夹中创建一个新的 Razor 组件 Counter.razor：

@page "/counter"

<h3>Counter</h3>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

6.3.2 运行应用

在命令行中运行 dotnet run，然后在浏览器中访问 http://localhost:5000/counter，你将看到一个简单的计数器。

7. 单元测试

7.1 什么是单元测试？

单元测试是软件开发中的一种测试方法，用于验证代码的各个单元（如函数、方法）是否按预期工作。

7.2 使用 xUnit 进行单元测试

7.2.1 安装 xUnit

在命令行中输入以下命令来安装 xUnit：

dotnet add package xunit
dotnet add package xunit.runner.visualstudio

7.2.2 创建测试项目

在命令行中输入以下命令来创建一个新的测试项目：

dotnet new xunit -o MyFirstWebApp.Tests
cd MyFirstWebApp.Tests

7.2.3 编写测试

在 MyFirstWebApp.Tests 项目中创建一个新的测试类 WeatherForecastTests.cs：

using Xunit;
using MyFirstWebApp.Controllers;
using System.Linq;

namespace MyFirstWebApp.Tests
{
    public class WeatherForecastTests
    {
        [Fact]
        public void Get_ReturnsFiveWeatherForecasts()
        {
            var controller = new WeatherForecastController();
            var result = controller.Get();
            Assert.Equal(5, result.Count());
        }
    }
}

7.2.4 运行测试

在命令行中输入以下命令来运行测试：

dotnet test

8. 实践练习

8.1 练习 1：创建一个简单的博客系统

• 目标：创建一个简单的博客系统，允许用户发布和查看博客文章。
• 要求：
  • 使用 MVC 架构。
  • 使用 Entity Framework 进行数据库访问。
  • 实现基本的 CRUD 操作。

8.2 练习 2：创建一个天气预报 Web API

• 目标：创建一个天气预报 Web API，返回未来几天的天气数据。
• 要求：
  • 使用 Web API 框架。
  • 返回 JSON 格式的数据。
  • 实现基本的错误处理。

8.3 练习 3：创建一个 Blazor 计数器应用

• 目标：创建一个 Blazor 应用，允许用户点击按钮增加计数器的值。
• 要求：
  • 使用 Blazor 框架。
  • 实现简单的状态管理。

9. 总结

通过本教程，你已经学习了如何使用 ASP.NET Core 创建 Web 应用程序，包括 MVC 架构、Razor Pages、Web API 和 Blazor 框架。你还了解了如何进行单元测试，并完成了一些实践练习。希望这些知识能够帮助你更好地理解和掌握 Web 应用开发。

10. 下一步

• 深入学习：探索更多高级主题，如依赖注入、多线程编程、性能优化等。
• 社区资源：加入 .NET 社区，参与讨论和学习。
• 持续学习：关注 .NET 和 C# 的最新版本，学习新特性和最佳实践。

祝你在 Web 应用开发的道路上取得成功！